<template>
    <div class="w-full md:h-650 flex justify-center">
        <!-- 电脑端显示 -->
        <div
            class="h-full 2xl:w-3/5 xl:w-4/5 md:w-full md:flex flex-col items-center justify-around hidden"
        >
            <div class="text-3xl pt-12 pb-14 tracking-widest">{{ state.home.products.title }}</div>
            <ul class="flex justify-around w-full px-5">
                <li
                    v-for="(item, index) in state.home.products.items"
                    :key="item.name"
                    class="items w-52 relative text-lg tracking-wider pb-2 cursor-pointer flex justify-center mb-5"
                >
                    <div
                        :class="index == data.swiper.activeIndex ? 'text-blue-500' : ''"
                    >{{ item.name }}</div>
                    <div
                        class="absolute bottom-0 w-44 h-1 border-b-4 rounded-md border-blue-500 left-1/2 transform -translate-x-1/2"
                        v-if="index == data.swiper.activeIndex"
                    ></div>
                </li>
            </ul>
            <swiper
                :pagination="{ 'dynamicBullets': true }"
                @swiper="onSwiper"
                @slideChange="onSlideChange"
            >
                <swiper-slide v-for="(item, index) in state.home.products.items" :key="index">
                    <ProductItems :image="item.image" :contents="item.contents" />
                </swiper-slide>
            </swiper>
            <div class="flex justify-center">
                <button class="border px-5 text-link border-link text-sm mb-5 py-1 rounded-md">点击购买</button>
            </div>
        </div>

        <!-- 手机端显示 -->
        <div class="w-full md:hidden mb-5">
            <div class="text-xl py-3 w-full text-center">{{ state.home.products.title }}</div>
            <swiper
                :pagination="{ 'dynamicBullets': true }"
                @click="getInform"
                @slideChange="onSlideChange"
            >
                <swiper-slide v-for="(item, index) in state.home.products.items" :key="index">
                    <div>
                        <img class="w-full h-full" :src="item.image" />
                    </div>
                    <div
                        class="text mb-2 text-lg tracking-widest absolute bottom-5 px-3 text-white"
                    >{{ item.name }}</div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import ProductItems from '@comps/smallComs/productItems.vue';
import { state } from "@utils/store";

const data = reactive({
    swiper: {
        activeIndex: 0
    }
})
function onSwiper(swiper: any) {
    data.swiper = swiper
}

function onSlideChange(e: any) {
    data.swiper.activeIndex = e.activeIndex
}

const getInform = () => {
    console.log('ok')
}


</script>

<style lang="scss" scoped>
.item_phone {
    min-width: 100vw;
}
.text {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>